<template>
  <div class="height_width-full">
    <div class="breadcrumb">
      <div class="breadcrumb-icon-box">
        <i class="el-icon-location-outline"></i>
      </div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path : '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path : '/asset-person'}">人员管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ curEditType }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-divider></el-divider>
    <div>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model.trim="ruleForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model.trim="ruleForm.nickname" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="登录名" prop="loginName">
              <el-input v-model.trim="ruleForm.loginName" placeholder="请输入登录名"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model.trim="ruleForm.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-radio v-model="ruleForm.gender" :label="1">男</el-radio>
              <el-radio v-model="ruleForm.gender" :label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="ruleForm.birthday"
                type="date"
                placeholder="请选择出生日期"
                align="right"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="软件类型" prop="taskSoftType">
              <el-select v-model="ruleForm.taskSoftType" placeholder="请选择软件类型">
                <el-option
                  v-for="(item,index) in taskSoftTypeList"
                  :key="index"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门" prop="depart">
              <el-select v-model="ruleForm.depart" placeholder="请选择部门">
                <el-option
                  v-for="item in departList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.title"
                  :disabled="item.status == 2">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职位" prop="post">
              <el-select v-model="ruleForm.post" placeholder="请选择职位">
                <el-option
                  :value="item.value" v-for="(item,index) in postList" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="账号类型" prop="userType">
              <el-select v-model="ruleForm.userType" placeholder="请选择账号类型">
                <el-option
                  :label="item.name"
                  :value="item.value" v-for="(item,index) in userTypeList" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="disabled" @click="submitForm('ruleForm')">立即保存</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-upload :file-list="fileList"
                     class="upload-demo"
                     drag
                     list-type="picture"
                     :on-success="handleAvatarSuccess"
                     :before-upload="handBeforeUpload"
                     :action="this.$api.API_FILE_UPLOAD"
                     :headers="fileUploadHeaders"
                     :on-remove="handleOnRemove">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: "EditPerson",
  data() {

    let checkDate = (rule , value , callback) => {
      if(new Date(value) > new Date()){
        callback(new Error("出生日期不能大于当前日期"));
      }
      callback();
    }

    return {
      disabled: false,
      fileUploadHeaders: {
        Authorization: this.$store.getters.getToken ? this.$store.getters.getToken : this.Storage.Local.get("token")
      },
      fileList: [],
      url: '',
      postList: [
        {
          value: "系统管理员"
        },
        {
          value: "资产管理员"
        }, {
          value: "资产领导"
        }
      ],
      departList: [],
      userTypeList: [
        {
          name: "系统内置",
          value: 1
        }, {
          name: "外部引入",
          value: 2
        }
      ],
      taskSoftTypeList: [
        {
          name: "BS软件",
          value: 1
        }, {
          name: "CS软件",
          value: 2
        }
      ],
      ruleForm: {
        id: null,
        taskSoftType: '',
        username: '',
        nickname: '',
        phone: '',
        post: '',
        gender: 1,
        birthday: '',
        depart: '',
        role: '',
        userType: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        nickname: [
          {required: true, message: '请输入用户昵称', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        loginName: [
          {required: true, message: '请输入登录名', trigger: 'blur'},
          {min: 2, max: 10, pattern: /([a-zA-Z\d\.]){2,10}/, message: "不能出现中文,长度为2至10个字符", trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {required: true, pattern: /^1[3-9][\d]{9}$/, message: '请输入正确的电话号码', trigger: 'blur'}
        ],
        post: [
          {required: true, message: '请输入职位', trigger: 'blur'}
        ],
        gender: [
          {required: true, message: '请选择性别', trigger: 'blur'}
        ],
        birthday: [
          {required: true, message: '请选择出生日期', trigger: 'blur'},
          {validator: checkDate, trigger: 'blur'}
        ],
        depart: [
          {required: true, message: '请选择部门', trigger: 'blur'}
        ],
        role: [
          {required: true, message: '请选择角色', trigger: 'blur'}
        ],
        userType: [
          {required: true, message: "请选择账号类型", trigger: 'blur'}
        ]
      },
      value: '',
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    };
  },
  created() {
    let data = this.Storage.Session.get("personData");
    if (data.type) {
      this.curEditType = "添加人员";
    } else {
      this.curEditType = "编辑人员";
      let personData = this.Storage.Session.get("personData").data;
      console.log(personData)
      this.ruleForm = personData;
      this.fileList.push({
        name: personData.nickname + "的头像",
        url: this.$api.SERVER_URL + personData.img
      })
    }
    this.getDepartList();
  },
  methods: {
    toDisabled() {
      this.disabled = true;
      setTimeout(() => {
        this.disabled = false;
      }, 500)
    },
    getDepartList() {
      this.$get(this.$api.API_DEPART_LIST, {
        pageNum: 1,
        pageSize: 100
      }).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.departList = res.data.data.list;
        }
      })
    },
    handleAvatarSuccess(response, file, fileList) {
      console.log(fileList)
      this.fileList = fileList;
      console.log(this.fileList)
      if (response.code == 200) {
        this.$notify.success(response.message);
        this.url = response.data.url;
      } else {
        this.$notify.error("文件太大，最大能上传2MB")
        fileList.splice(0, fileList.length);
      }
    },
    handBeforeUpload(file) {
      console.log(file);
      console.log(this.fileList.length);
      if (this.fileList.length > 0) {
        this.$notify.warning("最多上传一个头像");
        return false;
      }
    },
    handleOnRemove(file, fileList) {
      this.fileList = fileList;
    },
    submitForm(formName) {
      this.toDisabled();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.fileList.length) {
            this.$notify.warning("请上传一个头像");
            return;
          }
          console.log(this.fileList);
          this.ruleForm.img = this.url;
          this.$put(this.$api.API_USER_ADD, this.ruleForm).then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.$notify.success("保存成功");
              if (this.ruleForm.id) {
                if (this.ruleForm.id == this.Storage.Local.get("user").id) {
                  this.Storage.Local.set("user", this.ruleForm);
                  this.$store.commit("setUser", this.ruleForm);
                }
              }
              this.$router.push({
                name: "Person",
                path: "/asset-person"
              })
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
}
</script>

<style scoped>

</style>
